﻿<link href="~/css/labelauty.css" rel="stylesheet" />
<script src="~/js/jquery.min.js"></script>
<script src="~/js/labelauty.js"></script>

    <div class="rdo">
        <!--男生-->
        <input type="radio" name="rdo" class="rdolist" checked="checked" />
        <label class="rdobox">
            <span class="check-image"></span>
            <span class="radiobox-content">男</span>
        </label>
        <!--女生-->
        <input type="radio" name="rdo" class="rdolist" />
        <label class="rdobox">
            <span class="check-image"></span>
            <span class="radiobox-content">女</span>
        </label>
    </div>

    <!-- 分割线 -->
    <hr />

    <!-- 多选 -->
    <div class="fuxuan">

        <input type="checkbox" name="chk" class="chklist" checked="checked" />
        <!--  -->
        <label class="chkbox">
            <span class="check-image"></span>
            <span class="radiobox-content">UI设计师</span>
        </label>
        <!--  -->
        <input type="checkbox" name="chk" class="chklist" />
        <!--  -->
        <label class="chkbox">
            <span class="check-image"></span>
            <span class="radiobox-content">软件工程师</span>
        </label>
        <!--  -->
        <input type="checkbox" name="chk" class="chklist" />
        <!--  -->
        <label class="chkbox">
            <span class="check-image"></span>
            <span class="radiobox-content">架构师</span>
        </label>
    </div>
<script>
    $(document).ready(function () {
        //参数{input类名，选择类型(单选or多选)}
        $(".rdolist").labelauty("rdolist", "rdo");
        $(".chklist").labelauty("chklist", "check");

        $(".rdolist").click(function ()
        {
            if ($(this).eq($(".rdolist:first")))
            {
                alert("1");
            }
        })
    });
</script>